<template>
    <div class="lineChart">
        <!-- 这里是折线图组件 -->
        <div class="title">
            <p>未来七天游客量趋势图</p>
            <img src="../../images/dataScreen-title.png" alt="图片地址已失效">
        </div>
        <div class="charts" ref="refForLineChart"></div>
    </div>
</template>

<script lang="ts" setup name="Line">
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
let refForLineChart = ref<HTMLDivElement>() // 获取折线图展示区域所在的DOM元素
onMounted(() => {
    echarts.init(refForLineChart.value as HTMLDivElement).setOption({
        title: {
            text: '游客量',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false, // x轴两端的刻度与y轴刻度对齐（即x轴两端不留空白）
            splitLine:{show:false}, // 不显示分割线
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], 
            axisTick: {show:true},           
        },
        // 注：y轴允许有多个，有多个时，属性“yAxis”的值是数组形式，每个成员对象对应一个y轴↓
        yAxis: {
            splitLine:{show:false},
            axisLine: {show:true}, // 显示y轴轴线
            axisTick: {show:true}, // 显示y轴上的刻度（注：由于tick的中文含义是“钩号”，在此处意为“轴线上伸出的钩子”，因此可理解为“刻度”）
        },
        grid: {
            left: 40,
            right: 20,
            top: 0,
            bottom: 20,
        },
        series: [
            {
                type: 'line',
                data: [120, 1240, 66, 2299, 321, 890, 1200],
                smooth: true, // 让折线平滑显示（即变成平滑的曲线）
                // 区域填充样式。设置后显示成区域面积图↓
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: 'red' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'blue' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }
                },
            },
        ]
    })
})
</script>

<style scoped lang="scss">
.lineChart {
    width: 100%;
    height: 100%;
    //   background: url(../../images/dataScreen-main-cb.png) no-repeat center / cover;
    background: url(../../images/dataScreen-main-cb.png) no-repeat;
    background-size: 100% 100%;
    margin: 0px 20px;

    .title {
        margin-left: 10px;

        p {
            color: white;
            font-size: 20px;
        }
    }

    .charts {
        // background: red;
        height: calc(100% - 40px);
    }
}
</style>